
<template>
  <div class="body">
    <div style="width: 100%;height: 100px;background-color: #d0f3e2">
      <h2 style="padding-top: 120px">新青年新闻后台管理系统</h2>
    </div>
    <div id="login-box">
      <h2 style="padding-top: 50px">登录</h2>
      <div class="input-box" style="padding-top: 20px">
        <i class="iconfont">用户名</i>

        <input type="text" placeholder="UserName" v-model="name"/>
      </div>
      <div class="input-box">
        <i class="iconfont">密码</i>
        <input type="password" placeholder="UserPassword" v-model="password"/>
      </div>
      <button @click="login">Sign in</button>
    </div>
    <div style="width: 100%;height: 330px;background-color: #d0f3e2"></div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
        name:'',
        password:''
    }
  },
  methods:{
    login(){
      console.log(this.name,this.password)
      this.axios.post('http://115.159.84.44:24576/user/backend/v1/login/login_auth',{
          name:this.name,
          password:this.password
      },{
        headers: {
          'Content-Type': 'application/json'
        }
      }).then((res)=>{
        console.log("data ",res.data);
        if(res.data.code === 200){
          this.$message({
            message: '登陆成功',
            type: 'success'
          });
          this.$store.commit('changeTokenStatus',true);
          localStorage.setItem('token',res.data.data.token);
          localStorage.setItem("name",this.name)
          localStorage.setItem('password',this.password)
          this.$router.push({path:'/home'})
        }else{
          this.$message.error('登录失败');
        }

      });

    }
  }
}
</script>


<style scoped>
.body{
  background-color: #d0f3e2;
  width: 100%;
  height: 100%;
}
#login-box{
  background-color: #00000068;
  border-radius: 13px;
  text-align: center;
  margin: 0px auto;
  margin-top: 80px;
  width: 350px;
  height: 400px;
}

#login-box h1{
  padding-top: 60px;
  color: #ffffff;
}

#login-box .input-box{
  margin-top: 30px;
}
#login-box .input-box input{
  border: none;
  background: none;
  border-bottom: #FFFFFF 2px solid;
  padding: 5px 10px;
  outline: none;
  color: #FFFFFF;
}

#login-box button{
  line-height:30px;
  margin-top: 30px;
  width: 130px;
  height: 30px;
  border-radius:13px ;
  outline: none;
  border: none;
  background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
  color: #FFFFFF;
}

#login-box button:hover{
  background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}
#login-box .input-box i{
  color: #FFFFFF;
}

</style>